<template>
	
		<!-- <view>点我</view> -->
		
	<view v-if="detriment[0]!='fail'" class="empty">

						<view class="index container">
							<!-- 商品内容 -->
							<!-- <detriment :detriment="detriment"></detriment> -->
							<view class="detriment display-flex justify-between flex-wrap width-100 flex-row">
								<view class="productItem display-flex  width-100"  v-for="(item,index) in detriment" :key="item.uid" >
									
									<!-- 左侧图片 -->
									<div class="left" @click="navigator(item.uid)">
										<image :src="item.imgUrl"></image>
									</div>
									<!-- 右侧商品介绍 -->
									<div class="message ">
										<!-- 商品名称 -->
										<view class="bigTitle font-bold font-max">
											{{item.title}}
										</view>
										<!-- 商品价格 -->
							<view class="price display-flex align-end">
							<view class="current display-flex text-primary-color font-maxx" >
								<view class="text-primary-color font-mini">
									￥{{item.sellPrice}}
								</view>
								
							</view>
							<view class="original display-flex text-else-color" >
								<view class="text-else-color">
									￥{{item.marketPrice}}
								</view>
								
							</view>
						</view>
										
										<!-- 删除商品按钮 -->
										<view class="deletebtn" @click="del(item,index)">
											<image src="../../static/img/delete.png" mode=""></image>
										</view>
									</div>
									<view class="goods-settle-accounts">
												
									</view>
								</view>
								
							</view>
							
							
						
						</view>
					<!-- </view> -->
	</view>
	<view v-else class="empty-tips">
						<view class="navigator" >
							还未登录
						</view>
	</view>
	
	
	
</template>

<script>
	export default { 
		props:['detriment'],

		data() {
			return {
				
			}
		},
		
		methods:{
			navigator (uid) {
				this.$emit('cartsItemClick',uid)
			},
			
			// 删除商品
			async del(item,index){
				this.detriment.splice(index,1)
				// console.log(item[sid])
				const res = await this.$myRequest({
							
							url: '/deleteCar?sid='+item.sid
							
							})
							
							
				alert('删除成功')
			},
			
		}
		
	}
</script>

<style>
/* 整体内容 */
.index{
	margin-top:0upx;
	/* padding-top: -300upx; */
	width:100%;
}
/* 内容 */
.detriment{
	margin-bottom:20upx;
	box-sizing: border-box;
	position: relative;
}
/* 图片 */
.left{
	margin-left:50upx;
	display: inline-block;

}
.left image{
	width: 250upx;
	height: 250upx;
	margin: 0 auto;
	
}
/* 右侧介绍 */
.message{
	display: inline-block;
	/* padding-bottom: -100upx; */
	margin-left: 40upx;
	position: absolute;
	/* margin-top: -20upx; */
	float: left;
	
}
/* 删除按钮 */
.deletebtn image{
	width:35upx;
	height:35upx;
	margin-left:280upx;
	margin-top: -70upx;
	position: absolute;
	display: inline-block;
	float: right;
}

.text-primary-color{
	color: #f06c7a;
}
.text-else-color{
	font-size: 12px;
	text-decoration: line-through;
}
.empty-tips{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 300upx;
}

</style>
